<template>
	<view class="container">
		<view class="top flex-cenetr-wrap">
			<view class="now-Balance">127.56</view>
			<view class="now-Account">当前余额</view>
		</view>
		<view class="banner">
			<view class="balance-detail padding20">
				<view class="detail-text">余额明细</view>
			</view>
			<view class="b-consume flex-between padding20" v-for="(item,index) in irrgationList" :key='index'>
				<view class="b-left">
					<view class="consume">{{item.consumeName}}</view>
					<view class="date-time">
						<text>{{item.date}}</text>
						<text>{{item.time}}</text>
					</view>
				</view>
				<view class="b-right flex-between">
					<view class="consume-mony">{{item.mony}}</view>
					<view class="iconfont icon-arrow-backimg"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				irrgationList:[
					{
						'consumeName':'充值',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'+2000'
					},
					{
						'consumeName':'消费',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'-300'
					},
					{
						'consumeName':'消费',
						'date':'2020/02/05',
						'time':'12:00:00',
						'mony':'-2000'
					}
				]
			}
		},
	}
</script>

<style>
	@import url("../../common/css/iconfont.css");
	@import url("../../common/css/common.css");
	.top{
		width: 100%;
		height: 322rpx;
		background-color: rgba(43, 34, 32, 1);
		color: #fff;
	}
	.now-Balance{
		font-size: 60rpx;
		margin-bottom: 30rpx;
	}
	.padding20{
		padding: 0 20rpx;
	}
	.balance-detail{
		height:120rpx;
	}
	.detail-text{
		line-height: 120rpx;
	}
	.b-consume{
		height: 140rpx;
		background-color: #ccc;
		margin-bottom:2rpx;
	}
	.consume-mony{
		margin-right: 20rpx;
	}
	.consume{
		margin-bottom:10rpx;
	}
	.date-time text:first-child{
		margin-right: 20rpx;
	}
</style>
